<template>
	<view class="hasFlex">
		<view class="img">
			<image class="vip" src="../../../../static/images/zhuxue/vip.png"></image>
		</view>
		<view class="orderCon">
			<view class="conTit">学能提升VIP会员学习卡({{buyDays}}天)</view>
			<view class="dateTime">会员期限:{{vipEndDate}}</view>
			<view class="orderNo" v-if="currType == 'pay'">订单编号:{{orderNoLocal}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			currType:String,
			vipEndDate:String,
			buyDays:String,
			orderNoLocal:String
		}
	}
</script>

<style lang="scss" scoped>
	.orderCon{
		flex: 1;
		color: $pss-text-color3;
		@include respTo(phone){
			height: 140rpx;
			font-size: $font-size28;
		}
		@include respTo(pad){
			font-size: $padSize16;
		}
		.conTit{
			color: #ffb900;
			font-weight: bold;
			@include respTo(phone){
				height: 140rpx;
				font-size: $font-size30;
			}
			@include respTo(pad){
				font-size: $padSize18;
				margin-top: 10rpx;
			}
		}
		.dateTime{
			margin: 10rpx 0;
		}
		.orderNo{
			color: $pss-text-color8;
		}
	}
	.img{
		@include respTo(phone){
			width: 130rpx;
			height: 130rpx;
		}
		@include respTo(pad){
			width: 100rpx;
			height: 100rpx;
		}
		background: #ffb900;
		border-radius: 15rpx;
		flex-shrink: 0;
		margin-right: 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.vip{
			@include respTo(phone){
				width: 112rpx;
				height: 90rpx;
			}
			@include respTo(pad){
				width: 90rpx;
				height: 68rpx;
			}
		}
	}
</style>